<!DOCTYPE html>
<html>
<head>
<title>CSS3 Drop Down Menu</title>

<!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style type="text/css">

nav{
font:bold 16px Calibri,Arial,Sans-Serif;
}

nav *{margin:0 0 0 0;padding:0 0 0 0;list-style:none;}

nav ul{
background:#0054BB;
background:-webkit-linear-gradient(top, #0054BB, #175093);
background:-moz-linear-gradient(top, #0054BB, #175093);
background:-ms-linear-gradient(top, #0054BB, #175093);
background:-o-linear-gradient(top, #0054BB, #175093);
background:linear-gradient(top, #0054BB, #175093);
height:40px;
-webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);
box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);
}

nav li{float:left;display:inline;}

nav li a{
padding:0px 15px;
line-height:40px;
color:#111;
text-shadow:0px 1px 0px rgba(255,255,255,0.3);
display:block;
text-decoration:none;
-webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);
box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);
}

nav li a:hover{
background:rgba(0,0,0,0.1);
}
nav li a:active{
background:#0054BB;
background:-webkit-linear-gradient(bottom, #0054BB, #175093);
background:-moz-linear-gradient(bottom, #0054BB, #175093);
background:-ms-linear-gradient(bottom, #0054BB, #175093);
background:-o-linear-gradient(bottom, #0054BB, #175093);
background:linear-gradient(bottom, #0054BB, #175093);
}

nav li ul{
display:block;
width:170px;
position:absolute;
left:auto;
z-index:10;
visibility:hidden;
opacity:0;
height:auto;
-webkit-transition:all 0.26s ease-out 0.2s;
-moz-transition:all 0.26s ease-out 0.2s;
-ms-transition:all 0.26s ease-out 0.2s;
-o-transition:all 0.26s ease-out 0.2s;
transition:all 0.26s ease-out 0.2s;
}

nav li li{
display:block;
float:none;
width:100%;
}

nav li:hover > ul{
visibility:visible;
width:200px;
opacity:1;
}

nav li li ul{
left:200px;
margin-top:-40px;
}

nav li.sub > a{
position:relative;
padding-right:30px;
}

nav li.sub > a:after{
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:#eee transparent transparent transparent;
position:absolute;
top:20px;
right:10px;
}
nav li.sub li.sub > a:after{
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:transparent transparent transparent #eee;
position:absolute;
top:16px;
right:10px;
}

.clear{clear:both;}

</style>
  


</head>
<body>

<nav>
	<ul>
		<li><a href="#">Beranda</a></li>
		<li><a href="#">Profil</a></li>
		<li class="sub"><a href="#">Jurnal</a>
			<ul>
				<li><a href="#">2000</a></li>
				<li><a href="#">2001</a></li>
				<li class="sub"><a href="#">2002</a>
					<ul>
						<li><a href="#">21 April</a></li>
						<li><a href="#">22 April</a></li>
						<li class="sub"><a href="#">23 April</a>
							<ul>
								<li><a href="#">Senin</a></li>
								<li><a href="#">Selasa</a></li>
								<li><a href="#">Rabu</a></li>
								<li><a href="#">Kamis</a></li>
							</ul>
						</li>
						<li><a href="#">24 April</a></li>
						<li><a href="#">25 April</a></li>
					</ul>
				</li>
				<li><a href="#">2003</a></li>
				<li><a href="#">2004</a></li>
			</ul>
		</li>
		<li><a href="#">Komentar</a></li>
		<li><a href="#">Kontak</a></li>
	</ul>
</nav>




</body>
</html>